<template>
    <el-card class="box-card">
        <my-bread level1="权限管理" level2="角色列表"></my-bread>
        <!--表格-->
        <el-table :data="rolelist" style="width: 100%">

       <el-table-column type="expand"  width="80">
          <template slot-scope="scope">
            <el-row v-for="(item1,index) in scope.row.children" :key="index">
               <el-col :span="4">
                 <el-tag 
                 closable 
                 type="success" 
                 @close="colseRole(scope.row,item1.id)">{{item1.authName}}</el-tag>
               </el-col>

               <el-col :span="20">
                 <el-row v-for="(item2,index) in item1.children" :key="index">
                   <el-col :span="4">
                     <el-tag 
                     closable 
                     type="" 
                     @close="colseRole(scope.row,item2.id)">{{item2.authName}}</el-tag>
                   </el-col>
                   <el-col :span="20">
                     <el-tag
                     type="warning"
                     @close="colseRole(scope.row,item3.id)"
                     closable 
                     v-for="(item3,index) in item2.children"
                      :key="index">
                        {{item3.authName}}
                      </el-tag>
                   </el-col>
                 </el-row>

               </el-col>
             </el-row>

            <el-row>
                <span v-if="scope.row.children.length===0">未分配权限</span>
            </el-row>
          </template>

       </el-table-column>
        <el-table-column type="index" label="#" width="80"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="100">
        </el-table-column>
        <el-table-column prop="roleDesc" label="角色描述">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                plain
                type="primary"
                icon="el-icon-edit"
                circle></el-button>
                <el-button
                
                size="mini"
                plain
                type="danger"
                icon="el-icon-delete"
                circle></el-button>
                <el-button
                size="mini"
                plain type="success"
                icon="el-icon-check"
                @click="showMegBoxDele(scope.row)"  
                circle></el-button>

            </template>
        </el-table-column>
    </el-table>
    <!--弹出框-->
    <el-dialog title="分配权限" :visible.sync="dialogFormVisibleRole">

      <el-tree ref="tree"
      :data="rightsList"
      show-checkbox
      node-key="id"
      default-expand-all
      :default-checked-keys="checked"
      :props="defaultProps">
    </el-tree>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleRole = false">取 消</el-button>
        <el-button type="primary" @click="setRole()">确 定</el-button>
      </div>
    </el-dialog>

    </el-card>
     

</template>
<script >
     export default {
  data() {
    return {
      rolelist: [],
      dialogFormVisibleRole:false,
      rightsList:[],
      checked:[],
      defaultProps:{
        children: 'children',
        label: 'authName'
      },
      currUserId:''
    }
  },
  created() {
    this.getRolelist()
  },
  methods: {
    async setRole(){
        let arr1 = this.$refs.tree.getHalfCheckedKeys()
        let arr2 = this.$refs.tree.getCheckedKeys()
        let arr = [...arr1,...arr2];

        const res = await this.$http.post(`roles/${this.currUserId}/rights`,{
            rids:arr.join(',')
        })
        
        this.dialogFormVisibleRole = false;
        this.getRolelist();
        
    },
   async showMegBoxDele(role){
        const res = await this.$http.get(`rights/tree`)
        //console.log(res);
        this.rightsList = res.data.data

        let arr = [];
        //console.log(role.children)
        role.children.forEach(item1=>{
            arr.push(item1.id);
            item1.children.forEach(item2=>{
                arr.push(item2.id);
                item2.children.forEach(item3=>{
                    arr.push(item3.id)
                })
            })
        })

        this.checked = arr;

        this.currUserId = role.id
        this.dialogFormVisibleRole = true
    },
    //删除角色指定权限
   async colseRole(role,index){
    const res = await this.$http.delete(`roles/${role.id}/rights/${index}`);
    //更新整个列表
    role.children = res.data.data
    //this.getRolelist()
    },
    // 获取角色权限数据
    async getRolelist() {
      const res = await this.$http.get(`roles`)

      console.log(res)
      this.rolelist = res.data.data
    }
  }
}
</script>

<style>
.box-card {
  height: 100%;
}  
</style>